<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<%@page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="/WEB-INF/tlds/c.tld" prefix="c"%>
<%@ taglib uri="/WEB-INF/tlds/fmt.tld" prefix="fmt"%>
<%@ taglib uri="/WEB-INF/tlds/tiles-jsp.tld" prefix="tiles"%>
<c:set var="appCtx" value="${pageContext.request.contextPath}" />

<script type="text/javascript">
<!--
	var objCodigoDeAreaDestino;

	function validateAreaCodeSearchForm() {
		return true;
	}

	$("#areaCodeSearchFormBuscarBtn").button();
	$("#areaCodeSearchFormBuscarBtn").button().click(function() {
		if (!validateAreaCodeSearchForm()) {
			alert("errores en el formulario");
			return false;
		}

		//Se ejecuta la busqueda mediante ajax
		$("#areaCodeSearchFormResultsList").css("display", "none");
		
		$.post("${appCtx}/buscarCodigoArea", {
			localidad : $("#areaCodeSearchFormLocalidad").val(),
			codigoPostal : $("#areaCodeSearchFormCodigoPostal").val(),
			codigoArea : $("#areaCodeSearchFormCodigoArea").val()
		}, function(data) {
// 			alert("Hello " + data + " - objCodigoDeAreaDestino: " + objCodigoDeAreaDestino);
			$("#areaCodeSearchFormResultsList").css("display", "inline");
		});
		return false;

	});
	
	$('.tablaDeResultado tbody tr').bind('click', function(e)  {
		/* SE MARCA COMO SELECCIONADO EL REGISTRO CLICKEADO */
		$('.tablaDeResultado tbody tr').children('td').css('background-color','#fff');
		$(e.currentTarget).children('td').css('background-color','#ccc');
		
		/* SE CARGAN LOS DATOS SELECCIONADOS EN LOS INPUTS DEL FORMULARIO */
		$(e.currentTarget).children("td").each(function (index) {
			switch (index) {
				case 0:
// 					$("#areaCodeSearchFormCodigoArea").attr("value",$(this).text());
					objCodigoDeAreaDestino.val($(this).text());
					break;
				case 1:
// 					$("#areaCodeSearchFormCodigoPostal").attr("value",$(this).text());
					break;
				case 2:
// 					$("#areaCodeSearchFormLocalidad").attr("value",$(this).text());
					break;				
			}
		});
		
// 		alert("cargando valor");
		$("#areaCodeSearchFormResultsList").css("display", "none");
		$( "#areaCodeSearchForm" ).dialog( "close" );
	});
//-->
</script>
<div class="form">
	<table style="width: 580px; margin-left: 10px;" border="1">
		<tr>
			<td>
				<fieldset>
					<legend class="form formTitle">
						&nbsp;
						<fmt:message key="message.searchCriteria" />
					</legend>
					<table>
						<tr>
							<!--  -->
							<td class="label"><label><fmt:message key="label.location" />:</label></td>
							<td colspan="3"><input type="text" name="localidad" id="areaCodeSearchFormLocalidad" style="width: 250px;" /></td>
						</tr>
						<tr>
							<td class="label"><label><fmt:message key="label.zipCode" />:</label></td>
							<td colspan="3"><input type="text" name="codigoPostal" id="areaCodeSearchFormCodigoPostal" style="width: 250px;" /></td>
						</tr>
						<tr>
							<td class="label"><label><fmt:message key="label.workerData.areaCode" />:</label></td>
							<td colspan="3"><input type="text" name="codigoArea" id="areaCodeSearchFormCodigoArea" style="width: 250px;" /></td>
						</tr>
					</table>
				</fieldset>
			</td>
		</tr>
		<tr>
			<td align="right">
				<button id="areaCodeSearchFormBuscarBtn">
					<fmt:message key="button.search" />
				</button>&nbsp;
			</td>
		</tr>
	</table>
</div>
<div>
	<br />
</div>
<div id="areaCodeSearchFormResultsList" style="display: none;">
	<form class="form">
		<div id="resultados" style="margin-left: 10px;">
			<div class="encabezadoDeResultado" style="width: 570px;">
				<fmt:message key="message.searchResults" />
			</div>
			<table class="tablaDeResultado" style="width: 580px;" border="0">
				<thead>
					<tr>
						<th><fmt:message key="label.workerData.areaCode" /></th>
						<th><fmt:message key="label.zipCode" /></th>
						<th><fmt:message key="label.location" /></th>
						<th><fmt:message key="label.state" /></th>
					</tr>
				</thead>
				<tbody>
					<tr id="<c:out value='0111'/>" style="cursor: pointer;">
						<td>0111</td>
						<td>1842</td>
						<td>ESTEBAN ECHEVERRIA</td>
						<td>BUENOS AIRES</td>
					</tr>
					<tr id="<c:out value='0222'/>" style="cursor: pointer;">
						<td>0222</td>
						<td>1657</td>
						<td>3 DE FEBRERO</td>
						<td>BUENOS AIRES</td>
					</tr>
					<tr id="<c:out value='0333'/>" style="cursor: pointer;">
						<td>0333</td>
						<td>1500</td>
						<td>TEMPERLEY</td>
						<td>BUENOS AIRES</td>
					</tr>
				</tbody>
			</table>
		</div>
	</form>
</div>